<template>
  <div class="app-container v-flex">
    <filter-form
      :form="listQuery"
      :data="filterData"
      @search="search"
      @addForm="addForm" />
    <div ref="main" class="v-flex-elastic">
      <el-table
        v-if="height>0"
        ref="multipleTable"
        v-loading="listLoading"
        :data="tableData"
        border
        :height="height"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="50" />
        <el-table-column
          prop="clientName"
          show-overflow-tooltip
          label="所属服务" />
        <el-table-column
          prop="name"
          show-overflow-tooltip
          label="接口名称" />
        <el-table-column
          prop="authorize"
          show-overflow-tooltip
          label="鉴权码" />
        <el-table-column
          prop="httpMethod"
          show-overflow-tooltip
          label="请求方式" />
        <el-table-column
          prop="url"
          show-overflow-tooltip
          label="接口地址" />
        <el-table-column
          prop="desc"
          show-overflow-tooltip
          label="接口描述" />
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          width="130"
          class-name="small-padding fixed-width">
          <template slot-scope="{row ,$index}">
            <el-button
              v-permission-button="publicConfig['ITPS-VIEW']"
              class="el-icon-defined"
              size="mini"
              icon="el-icon-view"
              @click="view(row)" />
            <el-button
              v-permission-button="publicConfig['ITPS-UPDATE']"
              class="el-icon-defined"
              size="mini"
              icon="el-icon-edit"
              @click="updateForm(row,$index)" />
            <el-button
              v-permission-button="publicConfig['ITPS-DELETE']"
              class="el-icon-defined"
              size="mini"
              icon="el-icon-delete"
              @click="deleteData(row,$index)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getListPage" />
    </div>
    <base-dialog
      class="api-resource-dialog"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      @open="beforeOpenDialog"
      @updateData="updateData">
      <el-form
        ref="dataForm"
        :rules="dialog.rules"
        :model="dialog.form"
        :disabled="dialog.disabled"
        label-width="90px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属服务" prop="clientId">
              <el-select v-model="dialog.form.clientId">
                <el-option
                  v-for="child in clients"
                  :key="child.id"
                  :label="child.dicKey"
                  :value="child.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接口名称" prop="name">
              <el-input v-model="dialog.form.name" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="鉴权码" prop="authorize">
              <el-input v-model="dialog.form.authorize" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求方式" prop="httpMethod">
              <el-select v-model="dialog.form.httpMethod">
                <el-option label="GET" value="GET" />
                <el-option label="POST" value="POST" />
                <el-option label="DELETE" value="DELETE" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="接口地址" prop="url">
            <el-input v-model="dialog.form.url" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="接口描述">
            <el-input
              v-model="dialog.form.desc"
              type="textarea"
              :autosize="{ minRows: 4}" />
          </el-form-item>
        </el-row>
      </el-form>
    </base-dialog>
  </div>
</template>
<script>
import { getListPage, updateData, deleteData } from '@/api/dsc/interface/api-resource'
import { getListByTypeCode } from '@/api/dsc/system/dictionary/general'
import { tableMixin } from '@/utils/public'
export default {
  name: 'DscApiResource',
  mixins: [tableMixin],
  data() {
    return {
      listQuery: {
        page: 1,
        size: 20,
        clientId: ''
      },
      filterData: {
        clientId: {
          key: 'clientId',
          type: 'select',
          title: '所属服务',
          placeholder: '所有服务',
          options: [],
          props: { label: 'dicKey', value: 'id' }
        },
        keyName: {
          key: 'keyName',
          type: 'input',
          placeholder: '接口名称、鉴权码、接口地址'
        }
      },
      height: 0,
      listLoading: true,
      tableData: [],
      total: 0,
      dialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        form: {},
        rules: {
          clientId: { required: true, message: '请选择', trigger: 'change' },
          name: { required: true, message: '请输入', trigger: 'blur' },
          authorize: { required: true, message: '请输入', trigger: 'blur' },
          httpMethod: { required: true, message: '请选择', trigger: 'change' },
          url: { required: true, message: '请输入', trigger: 'blur' }
        }
      },
      currentRow: [],
      clients: []
    }
  },
  created() {
    this.getListPage()
    this.getList()
  },
  methods: {
    getList() {
      getListByTypeCode({ typeCode: this.publicConfig['025'] }).then(response => {
        this.clients = response.data
        this.filterData['clientId'].options = response.data
      })
    },
    getListPage() {
      this.listLoading = true
      getListPage(this.listQuery).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
        this.listLoading = false
      }).catch(_ => {
        this.listLoading = false
      })
    },
    search() {
      this.listQuery.page = 1
      this.getListPage()
    },
    /** 查看 */
    view(row) {
      this.currentRow = [row]
      const dialog = {
        title: '查看',
        visible: true,
        disabled: true,
        loading: false,
        form: row
      }
      this.dialog = Object.assign(this.dialog, dialog)
    },
    /** 添加 */
    addForm() {
      const dialog = {
        title: '添加',
        visible: true,
        disabled: false,
        loading: false,
        form: {
          status: 1,
          delFlag: 0,
          httpMethod: 'GET'
        }
      }
      this.dialog = Object.assign(this.dialog, dialog)
    },
    /** 编辑 */
    updateForm(row, index) {
      this.currentRow = [row]
      const dialog = {
        title: '编辑',
        visible: true,
        disabled: false,
        loading: false,
        form: JSON.parse(JSON.stringify(row))
      }
      this.dialog = Object.assign(this.dialog, dialog)
    },
    /** 添加或编辑接口 */
    updateData() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.dialog.loading = true
          updateData(this.dialog.form).then(response => {
            this.dialog.visible = false
            this.dialog.loading = false
            this.currentRow = [response.data]
            if (this.dialog.title === '添加') {
              this.tableData.unshift(this.currentRow[0])
              this.total++
            } else {
              const index = this.tableData.findIndex(item => item.id === this.currentRow[0].id)
              this.tableData.splice(index, 1, JSON.parse(JSON.stringify(this.currentRow[0])))
              this.$forceUpdate()
            }
            this.notifiySuccess('保存成功!')
          }).catch(_ => {
            this.dialog.loading = false
          })
        }
      })
    },
    deleteData(row, index) {
      this.confirmBox('确定删除?').then(() => {
        deleteData(row.id).then(response => {
          this.notifiySuccess('删除成功!')
          // this.tableData.splice(index, 1)
          // this.total--
          this.getListPage()
        })
      }).catch(() => {})
    },
    beforeOpenDialog() {
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate()
      })
    }
  }
}
</script>
